<template>
	<view class="information-container">
		<u-navbar-home :bgColor="bgColor">
			<template #left>
				<view class="title u-flex-y-center" style="color: #fff">
					<u-image :src="logo" width="80rpx" height="80rpx"></u-image>
					<view style="width: 10rpx"> </view>
					山西饲草收储交易中心
				</view>
			</template>
		</u-navbar-home>
		<getdatascrollview ref="getdatascrollview" :api="api" :seardata="querydata" :onPullingfalge="false">
			<template #default="{ list }">
				<view class="list1-box">
					<view class="list1-item" v-for="(item, index) in list1" :key="index" @click="list1tap(item)">
						<view class="list1-item-icon u-flex-xy-center">
							<u-icon :name="item.icon" size="30" color="#fff"></u-icon>
						</view>
						<view class="list1-item-text">
							<view class="list1-item-text-tetx1">{{ item.tetx1 }}</view>
							<view class="list1-item-text-tetx2">{{ item.tetx2 }}</view>
						</view>
					</view>
				</view>
				<view class="z-card rmzxlist">
					<view class="title u-flex-y-center"> 热门资讯 </view>
					<zxitem v-for="(item, key) in list" :key="key" :item="item"></zxitem>
				</view>
			</template>
		</getdatascrollview>

		<tabbar></tabbar>
	</view>
</template>

<script>
	// marketType
	import logo from "@/static/logo.png";
	import zxitem from "./components/zxitem.vue";
	import {
		getMarketPage
	} from "@/api/market.js";
	export default {
		components: {
			zxitem,
		},
		data() {
			return {
				api: getMarketPage,
				logo,
				bgColor: "#39C03E",
				querydata: {
					marketType: ""
				},
				list1: [{
						tetx1: "招标公告",
						tetx2: "牧场采招信息",
						icon: "chat",
						marketType: 1
					},
					{
						tetx1: "农牧新闻",
						tetx2: "行业动态随时关注",
						icon: "email",
						marketType: 2
					},
					{
						tetx1: "牛羊市场行情报价",
						tetx2: "更多市场行情分析",
						icon: "file-text",
						marketType: 3
					},
					{
						tetx1: "饲料市场行情报价",
						tetx2: "更多市场行情报价",
						icon: "rmb-circle",
						marketType: 4
					},
				],
			};
		},
		onShow() {
			this.$refs.getdatascrollview && this.$refs.getdatascrollview.onRefresh();
		},
		methods: {
			list1tap(item) {
				this.querydata.marketType = item.marketType;
				this.$nextTick(() => {
					this.$refs.getdatascrollview.onRefresh();
				});
				// this.$refs.getdatascrollview.onRefresh();
			}
		},
	};
</script>

<style lang="scss" scoped>
	.information-container {
		.list1-box {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx;
			justify-content: space-between;

			// 710 - 690 3
			.list1-item {
				height: 120rpx;
				width: 345rpx;
				background: #53c21d;
				// background: linear-gradient(to right, #39C03E 0%, #fff 100%);
				display: flex;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				align-items: center;

				// justify-content: center;
				.list1-item-icon {
					width: 100rpx;
				}

				.list1-item-text {
					display: flex;
					flex-direction: column;

					.list1-item-text-tetx1 {
						font-size: 28rpx;
						color: #fff;
						line-height: 50rpx;
					}

					.list1-item-text-tetx2 {
						font-size: 24rpx;
						color: rgba(255, 255, 255, 0.7);
					}
				}
			}
		}

		.rmzxlist {
			margin: 20rpx;
			margin-top: 0;

			.title {
				font-size: 28rpx;
				color: #333;
				font-weight: 600;
				height: 80rpx;
				padding-left: 20rpx;

				&::before {
					content: "";
					display: inline-block;
					width: 4rpx;
					height: 24rpx;
					background: #39c03e;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>